<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath }" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="${ctx }/resources/js/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="${ctx }/resources/fonts/fontawesome/font-awesome.min.css" media="all"/>
<style>
			.ym{
			width:600px;color: #333;margin-top: 10px;margin-bottom: 10px;  
			 
		}
		.ym .fy{
			float: left;
			font-size: 16px;
			padding: 0 20px;
			cursor: pointer;
			
		}
		.ym .fy:hover{
			color: #DE5D4D;
		}
		.ym ul{
			float: left;
			list-style: none;
			padding: 0;
			margin: 0;
		}
		.ym ul li{
			float:left;
			padding:0 5px;
			padding-top: 2px;
			font-size: 15px;
			cursor: pointer;
		}
		.ym ul li:hover{
			color: #DE5D4D;
		}　
</style>
<!--[if !IE]><!-->
<script type="text/javascript"
	src="${ctx}/resources/js/jquery/jquery-2.1.4.min.js"></script>
<!--<![endif]-->
<!--[if IE]>
	<script type="text/javascript" src="${ctx}/resources/js/jquery/jquery-1.11.3.min.js"></script>
<![endif]-->
<script type="text/javascript"
src="${ctx}/resources/js/nicescroll/jquery.nicescroll.min.js"></script>
<link rel="stylesheet" href="${ctx }/resources/css/customer/webside-icon.min.css" />
<script language="javascript" type="text/javascript"> 
$(function(){
    //用jQuery获取table中td值
    $("table tr").click(function(){
        var ale=$(this).find(".id").text();
        var ales=$(this).find(".rd").text();
       
    });
    $("#but").click(function(){
    	/* parent.$("#adId").val(ale);
        parent.$("#resourceName").val(ales); */
      //先得到当前iframe层的索引
      var index = parent.layer.getFrameIndex(window.name);
      //再执行关闭
      parent.layer.close(index);
    })
 
});



</script>
<style type="">
#sou{
padding-top:10px;
  height: 100%;
  width: 50%;

}
#mytable{
 width: 500px;
 margin-left:50px;
 
}

#mytable td{
padding-left:5px;
padding-bottom: 2px;
padding-top: 2px;
}
 
</style>

 
</head>
<body class="no-skin"  style="overflow:hidden;">
	<input type="hidden" id="subjectId" name="subjectId" value="${subjectId}" />
	<div id="mai" style="margin:0 auto;">
	 <div class="column1" style="margin-top:15px ;margin-left:100px;float:left;width:30%;height:100%;">
					<p style="font-weight:700;font-size:20px;">已绑定剧集:</p>
						<div style="margin:0px 10px;width:280px;height:100%;overflow:auto;">
							<table   border=""   id="table1" style="width:250px;">
								<tr>
									<th style="padding:0px 5px;">编号</th>
									<th style="display:none;padding:0px 5px;">剧集编号</th>
									<th style="padding:0px 5px;">剧集名称</th>
									<th style="padding:0px 5px;text-align:center;">操作</th>
								</tr>
								<c:forEach var="item" varStatus="t" items="${seriesBySubjectList}" >
									<tr>
										<td>${item.subjectSeriesId}</td>
										<td style="display:none;">${item.seriesId}</td>
										<td>${item.seriesName}</td>
										<td><a href="#" onclick="clean(this);">删除</a></td>
									</tr>
								</c:forEach>
							</table>
						</div>
					</div>
					<input type="text" style="display:none;" id="pagecount">
					
                    <div id="sou" style="float:left">
                   
                    <div class="column2" style="margin:0px 10px;float:left;width:300px;height:600px;">
 					<input type="text" style="display:none;"  />
 					 <div style="margin-left:50px">资源名称 &nbsp;&nbsp;&nbsp;<input id="searchKey"  type="text" style="border-radius:4px;"/> &nbsp;&nbsp;&nbsp;<a onclick="searchbykey()" id="search" href="#" style="display:inline-block;text-decoration:none;border-radius:5px;width:58px;height:24px;line-height:24px;text-align:center;border:1px solid #000">搜索</a>
				     &nbsp; &nbsp; &nbsp; &nbsp;<input type="button" style="background:#fff;border-radius:5px;width:58px;height:24px;border:1px solid pink;line-height:24px;" value="确定" id="but"/></div>
				   <div style="height:20px"></div>
				   
				   <table   border=""   id="mytable">
					
					<tr>
					  
					  <th>编号</th>
				      <th>资源名称</th>
				      <th>操作</th>
				     <!--  <td>图片</td> -->
				     <!--  <td>截止时间</td> -->

				   </tr>
				   
				   <c:forEach var="item" varStatus="t" items="${seriesResourceList}" >
				    <tr>
				     <td class="id">${item.id }</td>
				      <td class="rd" >${item.name}</td>
				      <td><a href="#" onclick="addIn(this);">添加</a></td>
				     <%--  <td><img id="imgCover" style="height:40px; width:90px;" alt="" src='/webside-huoyan-manage${item.resource_url}'/></td> --%>
				    <%--   <td>${datelist.get(t.index)}</td>
 --%>
				   </tr>
				    </c:forEach>
					</table>
					 
				    	<div class="ym" style=""><div class="fy" onclick="xy()">下一页</div><ul id="ymcount"></ul><div class="fy" onclick="sy()">上一页</div><div class="fy">共：<c:out  value="${totalPageCount }"></c:out></>页</div></div>

					<input type="text" style="display:none" id="rscount1" value='${totalPageCount }'/>
					</div>
					 </div>
						</div>	
	<script type="text/javascript">
			showpage();
		function sy(){
			var count=$("#pagecount").val();
			   if(count>1){
				var key =$("#searchKey").val().trim();
				search(key,count-1,15);
				$("#pagecount").val(count-1);
			}   
			
		}	
		
		function xy(){
			var count=$("#pagecount").val().trim();
			var total=$("#rscount1").val();
			var total1=$("#rscount").val();

			if(total!=undefined && count!=total){
				var key =$("#searchKey").val().trim();
				$("#pagecount").val(parseInt(count)+1);
				search(key,parseInt(count)+1,15);
		}else if(total1!=undefined && count!=total1){
			
			var key =$("#searchKey").val().trim();
			$("#pagecount").val(parseInt(count)+1);
			search(key,parseInt(count)+1,15);
			}
		}
		function showpage(){
			var count=$("#rscount1").val();
			if($("#pagecount").val().trim()=="" ||  $("#pagecount").val().trim()==undefined){
				$("#pagecount").val("1");
			}
			if(count==0){
				$(".ym").hide();
			}else{
				$(".ym").show();
				$("#ymcount").html("");
				for(var i=1;i<count-1+2;i++){
					$("#ymcount").append("<li class='addColor' onclick='ym(this)'>"+i+"</li>");
				}
				var $cgcolor=$(".addColor").eq(0);
				 $cgcolor.css("color","red");
				 for(var i=0;i<count;i++){
			 			if(i>6){
			 				$("#ymcount li:eq("+i+")").css('display','none');
			 			}
			 		}
			}
			
		}
		function searchbykey(){
			var key =$("#searchKey").val().trim();
			search(key,1,15);
			if(key!=""){
				search(key,$this.text(),15);
			}
		}
		function ym(obj){
			var $this=$(obj);
			var key =$("#searchKey").val().trim();
			$("#pagecount").val($this.text());
			
			search(key,$this.text(),15);
		}
		
		function search(key,no,size){
		
			var params = {};
			params["pageNo"] = no;
			params["pSize"] = 15;
			params["sort"] = key;
			var code=$("#positionCode").val();
			$.ajax({
				type:"post",
				url:"${pageContext.request.contextPath }/subject/searchPage.html?code="+code,
				data:params,
				success:function(data){
					console.log(data);
					 var json=eval(data);
					var shtml="<tr><th>编号</th><th>资源名称</th><th>操作</th></tr>";
					 $.each(json, function (index, item) {  
		                 //循环获取数据   
		                 /* alert(item.subjectSeriesId); */
		                 var record =new Object(); 
		                	 record.id=json[index].id;
		                	 record.name=json[index].name;
		                 var  plDetailStr=""; 
		                 plDetailStr+="<tr><td>"+record.id+"</td><td style='padding-left:3px;'>"+record.name+"</td>";
						 plDetailStr+="<td style='text-align:center;'><a href='#'  onclick='addIn(this);'>添加</a></td>";
						 shtml+=plDetailStr;
		             });
					$("#mytable").html(shtml);
					var count=${totalPageCount };
					if(count==0){
						$(".ym").hide();
					}else{
						$(".ym").html("<div class='fy' onclick='xy()'>下一页</div><ul id='ymcount'></ul><div class='fy' onclick='sy()'>上一页</div><div class='fy'>共："+count+"页</div>");	
						var inhtml = "";
						for(var i=1;i<count+1;i++){
							 inhtml += "<li class='addColor' onclick='ym(this)'>"+i+"</li>";
						}
						$("#ymcount").html(inhtml);
						var $cgcolor=$(".addColor").eq(parseInt(no)-1);
						var  $recolor = $(".addColor").eq(parseInt(no)-2);
						 $cgcolor.css("color","red");
						 $recolor.css("color","");
						 for(var i=0;i<count;i++){
							 
					 			if(i<parseInt(no)-1-5 | i>parseInt(no)-1+5){
					 				$("#ymcount li:eq("+i+")").css('display','none');
					 			}
					 	
					 		}
					}
				}
			});
		}
		function addIn(obj){
			//获取点击的一行tr
		    var tr = $(obj).parent().parent();
		    //获取tr的所有td元素
		    var b = tr.children("td");
		    //取得第1列元素
		    var c = b.eq(0);
		    //显示第1列的值
		    var seriesId= c.text();
			var $this=$(obj);
			var subjectId = $("#subjectId").val();
			$.ajax({
				type:"get",
				url:"${pageContext.request.contextPath }/subject/addIn.html?subjectId="+subjectId+"&seriesId="+seriesId,
				data:{},
				dataType: "json",
				async : false,
				error: function() {
                    alert("Connection error");
                },
				success:function(data){
					$(obj).parent().parent().css("display","none");
					console.log(data);
					 var json=eval(data);
		        	 var html="<tr><th style='padding:0px 5px;'>编号</th><th style='display:none;padding:0px 5px;'>剧集编号</th><th style='padding:0px 5px;'>剧集名称</th><th style='padding:0px 5px;text-align:center;'>操作</th></tr>";
		        	
		        	 $.each(json, function (index, item) {  
		                 //循环获取数据   
		                 /* alert(item.subjectSeriesId); */
		                 var record =new Object(); 
		                	 record.id=json[index].subjectSeriesId;
		                	 record.seriesId=json[index].seriesId;
		                	 record.name=json[index].seriesName;
		                 var  plDetailStr=""; 
		                 plDetailStr+="<tr><td>"+record.id+"</td><td style='display:none;'>"+record.seriesId+"</td><td style='padding-left:3px;'>"+record.name+"</td>";
						 plDetailStr+="<td style='text-align:center;'><a href='#'  onclick='clean(this);'>删除</a></td>";
						 html+=plDetailStr;
						 $("#table1").html(html);
		             });
					
				}
			});
			
		}
		function clean(obj){
			//获取点击的一行tr
		    var tr = $(obj).parent().parent();
		    //获取tr的所有td元素
		    var b = tr.children("td");
		    //取得第1列元素
		    var c = b.eq(0);
		    //显示第1列的值
		    var subjectSeriesId= c.text();
			var $this=$(obj);
			var subjectId = $("#subjectId").val();
			$.ajax({
				type:"get",
				url:"${pageContext.request.contextPath }/subject/clean.html?subjectSeriesId="+subjectSeriesId,
				data:{},
				dataType: "json",
				async : false,
				error: function() {
                    alert("Connection clean error");
                },
				success:function(data){
					$(obj).parent().parent().css("display","none");
					console.log(data);
					 var json=eval(data);
		        	 
		        	 search("",1,15);
				}
			});
			
		}
		$(document).keydown(function(event){ 
			if(event.keyCode==13){
				searchbykey();
			} 
		});
		
	</script>
</body>
</html>